<template>
  <div class="nodeList">
    <div class="nodeList_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">节点列表<i class="el-icon-close"></i></div>
    </div>
    <!-- 内容 -->
    <div class="nodeList_content">
      <!-- 新增按钮 -->
      <div class="newBtn">
        <button @click="toAddMaster">
          <i class="el-icon-trophy"></i>添加主要节点
        </button>
      </div>
      <!-- 节点列表 -->
      <div class="contentList">
        <!-- <ul class="wrapBox"> -->
        <!-- 一级节点 -->
        <!-- <li class="nodeBox" v-for="(item,index) in nodeList" :key="index">
                    <div class="nodeOne">
                        <div>{{item.name}}<i v-if="item.children" @click="openNode" class="el-icon-caret-top"></i></div>
                        <div class="icon_oper">
                            <div @click="addNodeOne(item.id)"><i class="el-icon-plus"></i></div>
                            <div><i class="el-icon-edit"></i></div>
                            <div @click='removeNode(item.id)'><i class="el-icon-delete"></i></div>
                        </div>
                    </div> -->
        <!-- 二级节点 -->
        <!-- <ul>
                        <li v-for="(item1,index1) in item.children" :key="index1">
                            <div class="nodeOne">
                                <div>{{item1.name}}<i v-if="item1.children" class="el-icon-caret-top"></i></div>
                                <div class="icon_oper">
                                    <div @click="addNodeOne(item1.id)"><i class="el-icon-plus"></i></div>
                                    <div><i class="el-icon-edit"></i></div>
                                    <div @click='removeNode(item1.id)'><i class="el-icon-delete"></i></div>
                                </div>
                            </div> -->
        <!-- 多级节点 -->
        <!-- <ul>
                                <li v-for="(item2,index2) in item1.children" :key="index2">
                                    <div class="nodeOne">
                                        <div>{{item2.name}}</div>
                                        <div class="icon_oper">
                                            <div @click="addNodeOne(item2.id)"><i class="el-icon-plus"></i></div>
                                            <div><i class="el-icon-edit"></i></div>
                                            <div @click='removeNode(item2.id)'><i class="el-icon-delete"></i></div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul> -->

        <el-tree
          :data="nodeList"
          node-key="id"
          highlight-current
          :expand-on-click-node="false"
        >
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <div class="dataName">{{ data.name }}</div>
            <div>
              <el-button type="text" size="mini" @click="() => append(data.id)">
                <i class="el-icon-plus"></i>
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="
                  () =>
                    editBtn(
                      data.id,
                      data.pid,
                      data.name,
                      data.type,
                      data.route,
                      data.client
                    )
                "
              >
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button type="text" size="mini" @click="() => remove(data.id)">
                <i class="el-icon-delete"></i>
              </el-button>
            </div>
          </div>
        </el-tree>
        <el-dialog
          :title="diaText"
          :visible.sync="dialogVisible"
          width="50%"
          @close="closeFn"
          :before-close="handleClose"
        >
          <div class="body">
            客户端类型
            <el-radio-group v-model="client">
              <el-radio-button label="1">合作方pc管理端</el-radio-button>
              <el-radio-button label="2">合作方小程序管理端</el-radio-button>
              <el-radio-button label="3">总后台pc端</el-radio-button>
              <el-radio-button label="5">用户端</el-radio-button>
              <el-radio-button label="6">卖场后台管理</el-radio-button>
            </el-radio-group>
          </div>
          <div class="body">
            节点类型
            <el-radio-group v-model="type">
              <el-radio-button label="menu">菜单</el-radio-button>
              <el-radio-button label="api">接口</el-radio-button>
              <el-radio-button label="page">页面</el-radio-button>
              <el-radio-button label="ability">标识</el-radio-button>
              <el-radio-button label="pertype">分类</el-radio-button>
            </el-radio-group>
          </div>
          <div class="body">
            节点名称 <el-input v-model="nodeName"></el-input>
          </div>
          <div class="body">
            路由地址 <el-input v-model="nodeRoute"></el-input>
          </div>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addEdit">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      diaText: "添加主节点", //对话框提示文字
      nodeList: [],
      dialogVisible: false,
      type: "menu",
      nodeName: "", //节点名称
      nodeRoute: "", //路由地址
      client: null,
      id: null,
      pid: null,
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  mounted() {
    this.getNodeList();
  },
  methods: {
    // 获取节点列表
    getNodeList() {
      this.$http
        .post("/api/root/Rbac/index", { output: "tree" })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.nodeList = res.data.permissions ? res.data.permissions : [];
            console.log(this.nodeList);
          }
        });
    },
    handleNodeClick() {},

    // 点击合并和展开
    openNode() {},
    remove(node, data) {
      console.log(node);
      console.log(data);
    },

    // 添加节点或修改
    addEdit() {
      if (!this.type) {
        this.$message.warning("节点类型为必选项");
      } else if (!this.nodeName) {
        this.$message.warning("节点名称为必选项");
      } else if (this.client === null) {
        this.$message.warning("节点客户端为必选项");
      } else if (this.type != "pertype" && !this.nodeRoute) {
        this.$message.warning("节点路由为必选项");
      } else {
        this.$http
          .post("/api/root/Rbac/savenode", {
            id: this.id,
            pid: this.pid,
            type: this.type,
            route: this.nodeRoute,
            name: this.nodeName,
            client: this.client,
          })
          .then((res) => {
            console.log(res);
            if (res.code == 1) {
              this.$message.success(this.id ? "修改成功" : "添加成功");
              this.dialogVisible = false;
              this.getNodeList();
            } else {
              this.$message.error(res.msg);
            }
          });
      }
    },

    // 添加主要节点
    toAddMaster() {
      this.dialogVisible = true;
      this.diaText = "添加主要节点";
      this.pid = 0;
    },

    //添加多级节点
    append(id) {
      console.log(id);
      this.diaText = "添加节点";
      this.dialogVisible = true;
      this.pid = id;
      this.id = null;
    },

    // 删除节点
    remove(id) {
      this.$confirm("确定要删除此节点吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http.post("/api/root/Rbac/deletenode", { id }).then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.getNodeList();
            this.$message.success("删除成功");
          }
        });
      });
    },

    // 编辑按钮
    editBtn(id, pid, name, type, route, client) {
      this.dialogVisible = true;
      this.id = id;
      this.nodeName = name;
      this.pid = pid;
      this.nodeRoute = route;
      this.type = type;
      this.client = client;
    },

    //关闭对话框
    closeFn() {
      (this.type = "menu"), (this.nodeName = ""), (this.nodeRoute = "");
    },

    //关闭对话框
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import "nodeList.less";
</style>

